import React, { useState, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import { getLiquidOption } from "@/config/echarts.config";
// import styles from "./MonCharts.module.less";

const LiquidCharts = ({
  data = [{ name: "Fitst", value: 1 }],
  color = "#3ba4ff",
  borderColor = "#41a4ff",
}) => {
  const [option, setOption] = useState({});

  useEffect(() => {
    setOption(getLiquidOption(data, color, borderColor));
  }, []);

  return <ReactEcharts style={{ height: 220 }} option={option} />;
};

export default LiquidCharts;
